<template>
    <div class="box">
      <a-form :model="formState" name="horizontal_login" layout="inline" autocomplete="off">
        <a-form-item>
  
          <a-input  v-model="input" placeholder="用户姓名"></a-input>
        </a-form-item>
        <a-form-item>
          <a-range-picker v-model:value="formState.time" :placeholder="['编辑开始日期', '编辑结束日期']" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" :icon="h(SearchOutlined)" @click="getData">查询</a-button>
        </a-form-item>
      </a-form>
      <div style="margin-top: 30px;">
        <el-table :data="tableData" :header-cell-style="{ backgroundColor: '#ECF4FF', color: '#333333' }"
          :row-class-name="tableRowClassName" style="width: 100%">
          <el-table-column prop="address" label="用户姓名">
          </el-table-column>
          <el-table-column prop="date" label="导出时间" width="100">
          </el-table-column>
          <el-table-column prop="name" label="数据来源">
          </el-table-column>
          <el-table-column prop="name" label="搜索条件">
          </el-table-column>
          <el-table-column prop="name" label="导出条数">
          </el-table-column>
          <el-table-column prop="name" label="新扣条数">
          </el-table-column>
          <el-table-column prop="name" label="下载链接">
          </el-table-column>
          <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
        </el-table>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
      </div>
    </div>
  </template>
  <script setup>
  import { ref } from "vue";
  import { h } from "vue";
  import { SearchOutlined } from "@ant-design/icons-vue";
  const formState = ref({
    username: "",
    time: "",
  });
  const currentPage4  =  ref(4)
  const tableData = [{
    date: '2016-05-03',
    name: '最新标讯名称',
    address: '公司名称（全称',
  }, {
    date: '2016-05-02',
    name: '最新标讯名称',
    address: '公司名称（全称',
  }, {
    date: '2016-05-04',
    name: '最新标讯名称',
    address: '公司名称（全称',
  }, {
    date: '2016-05-01',
    name: '最新标讯名称',
    address: '公司名称（全称',
  }]
  const handleSizeChange =(val)=> {
          console.log(`每页 ${val} 条`)
        }
        const handleCurrentChange =(val)=> {
          console.log(`当前页: ${val}`)
        }
  </script>
  
  <style lang="scss" scoped>
  .el-pagination{
    margin-top: 28px;
  }
  /* 添加隔行变色的CSS */
  :deep(.el-table .el-table__body tr.el-table__row:nth-child(even)) {
    background-color: #EDF0F6;
  }
  
  :deep(el-table .el-table__body tr.el-table__row:nth-child(odd)) {
    background-color: #ffffff;
  }
  </style>